<template>
	<view class="serviceStation">
		<u-navbar title="商品/服务详情" :border-bottom="false"></u-navbar>
		<view class="swiper">
			<u-swiper :list="swiper_list" :height="572"></u-swiper>
		</view>
		<view class="price">
			<view class="l">
				<view class="l1">￥{{ info.xj_sprice }}</view>
				<view class="l2">推广佣金:￥{{ info.xj_fenyong }}</view>
			</view>
			<view class="r">已售卖{{ info.max_stock - info.sy_stock }}份</view>
		</view>
		<view class="name">
			<view class="l">{{ info.goods_title }}</view>
			<!-- <view>
				<label for="female"><img src="../../static/fx.png" alt="" class="t_l_f" @click="show = true" /></label>
			</view> -->
		</view>
		<view class="tips">
			<view class="item">
				服务
				<view class="r">随时退 ·过期可退·需提前电话联系服务站</view>
			</view>
			<view class="item">
				须知
				<view class="r">购买后请前往服务站点核销</view>
			</view>
			<view class="item">
				限制
				<view class="r">部分商品限用一张</view>
			</view>
		</view>
		<view class="shops">
			<view class="l">
				<view class="l1">{{ info.fwz_info.title }}<span style="padding: 0 10rpx;">·</span>服务站</view>
				<view class="l2">{{ info.fwz_info.address }}</view>
			</view>
			<view class="r">
				<img src="../../static/dianhua2.png" alt="" class="r1" @click="dianhua(info.fwz_info.kefu_tel)" />
			</view>
		</view>
		<view class="cneter">
			<view class="title">商品/服务详情</view>
			<view class="text">
				<rich-text :nodes="info.details"></rich-text>
			</view>
			<!-- <view class="number">
				<view class="l">购买数量</view>
				<view class="r">
					<u-number-box :min="1" :max="100" v-model="quantity" :disabled-input="true"></u-number-box>
				</view>
			</view>
			<view class="b">
				<view class="b1">
					<img src="../../static/gwc2.png" alt="" />
					<view class="btext">购物车</view>
				</view>
				<view class="b_r">
					<view class="b_r1">加入购物车</view>
					<view class="b_r2" @click="determine">立即购买</view>
				</view>
			</view> -->
		</view>
		<wm-poster v-if="show" @FShow="FShow" @success="success" :imgSrc="info.map_image" :QrSrc="QrSrc" :Title="info.goods_title" :PriceTxt="'￥' + info.xj_sprice"></wm-poster>
	</view>
</template>

<script>
import _ from 'lodash';
import wmPoster from '@/components/wm-poster/wm-poster.vue';
import { fwzGoodsInfo, goodsFxMa } from '../../libs/axios.js';

export default {
	data() {
		return {
			show: false,
			QrSrc: '',
			OriginalTxt: '￥99.99',
			quantity: 1,
			info: {},
			swiper_list: []
		};
	},
	components: {
		wmPoster
	},
	onLoad(option) {
		this.getfwzGoodsInfo(option.id);
	},
	methods: {
		success(e) {
			const _this = this;
			uni.getSetting({
				success(res) {
					console.log(res);
					if (!res.authSetting['scope.writePhotosAlbum']) {
						console.log('相机权限未开启');
						// 尝试拉起权限
						uni.showModal({
							title: '提示',
							content: '保存图片失败，未开启授权, 请问是否开启授权保存图片？',
							success(res) {
								if (res.confirm) {
									// 点击确定按钮，尝试拉起权限
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success() {
											uni.saveImageToPhotosAlbum({
												//保存图片到系统相册。
												filePath: e, //图片文件路径
												success: function () {
													uni.showToast({
														title: '图片保存成功',
														icon: 'none'
													});
												},
												fail: function (e) {
													console.log(e);
													uni.showToast({
														title: '图片保存失败',
														icon: 'none'
													});
												}
											});
										},
										fail(err) {
											console.log(err);
										}
									});
								}
							}
						});
					} else {
						uni.saveImageToPhotosAlbum({
							//保存图片到系统相册。
							filePath: e, //图片文件路径
							success: function () {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								});
							},
							fail: function (e) {
								console.log(e);
								uni.showToast({
									title: '图片保存失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		dh(x, y) {
			let x1 = Number(x);
			let y2 = Number(y);
			uni.openLocation({
				latitude: x1,
				longitude: y2,
				success: function () {
					console.log('success');
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		dianhua(tel) {
			uni.makePhoneCall({
				phoneNumber: tel + '',
				success: () => {},
				fail: () => {}
			});
		},
		CLireplace(htmlstr) {
			//正则匹配所有img标签
			//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
			//正则匹配不含style="" 或 style='' 的img标签
			var regex1 = new RegExp('(i?)(\<img)(?!(.*?style=[\'"](.*)[\'"])[^\>]+\>)', 'gmi');
			//给不含style="" 或 style='' 的img标签加上style=""
			htmlstr = htmlstr.replace(regex1, '$2 style=""$3');
			//正则匹配含有style的img标签
			var regex2 = new RegExp('(i?)(\<img.*?style=[\'"])([^\>]+\>)', 'gmi');
			//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
			htmlstr = htmlstr.replace(regex2, '$2width:100%;display:block;$3');
			return htmlstr;
		},
		async getfwzGoodsInfo(id) {
			let info = await fwzGoodsInfo({ id: id });
			console.log(info);
			info.data.arr_image = JSON.parse(info.data.arr_image);
			info.data.arr_image.forEach((item) => {
				this.swiper_list.push({
					image: item,
					title: ''
				});
			});
			this.info = info.data;
			this.info.details = this.CLireplace(this.info.details);
		},
		async getgoodsFxMa() {
			let info = await goodsFxMa({ id: this.info.id });
			let a = info.data.split('');
			a.shift();
			a = a.join('');
			this.QrSrc = 'https://csapi.yingshishequ.com' + a;
			console.log(this.QrSrc);
		},
		FShow() {
			this.show = false;
		},
		determine: _.debounce(
			function () {
				console.log(1);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		)
	}
};
</script>

<style lang="scss">
.serviceStation {
	background: rgba(245, 245, 245, 1);
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.swiper {
		height: 572rpx;
	}
	.price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		.l {
			display: flex;
			align-items: center;
			.l1 {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(255, 67, 73, 1);
			}
			.l2 {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-left: 10rpx;
			}
		}
		.r {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
		}
	}
	.name {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 26rpx;
		box-sizing: border-box;
		.l {
			width: 80%;
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //文本超出时显示省略号
			display: -webkit-box;
			-webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
			-webkit-line-clamp: 2; //内容限制的行数
		}
		.t_l_f {
			width: 42.98rpx;
			height: 42.98rpx;
		}
	}
	.tips {
		padding: 10rpx 26rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(163, 162, 162, 1);
		.item {
			display: flex;
			.r {
				margin-left: 10rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.shops {
		margin: 10rpx 20rpx;
		border-radius: 8rpx;
		background: linear-gradient(90deg, rgba(255, 67, 73, 1) 0%, rgba(255, 80, 86, 1) 60.41%, rgba(207, 19, 19, 1) 100%);
		padding: 20rpx 34rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.l {
			width: 70%;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			.l1 {
			}
			.l2 {
				width: 100%;
				margin-top: 10px;
				white-space: nowrap; // 强制一行显示
				overflow: hidden; // 超出隐藏
				text-overflow: ellipsis; // 省略号
			}
		}
		.r {
			display: flex;
			align-items: center;
			img {
				width: 50rpx;
				height: 50rpx;
			}
			.r2 {
				margin-left: 30rpx;
			}
		}
	}
	.cneter {
		margin-top: 64rpx;
		border-radius: 41.3rpx;
		background: rgba(255, 255, 255, 1);
		padding: 34rpx 26rpx;
		box-sizing: border-box;
		.title {
			font-size: 40rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.text {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-top: 20rpx;
			padding-bottom: 16rpx;
		}
		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			box-sizing: border-box;
			.l {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
		}
		.b {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.b1 {
				text-align: center;
				img {
					width: 37.38rpx;
					height: 35.94rpx;
				}
				.btext {
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					margin-top: 10rpx;
				}
			}
			.b_r {
				display: flex;
				width: 616rpx;
				height: 80rpx;
				border-radius: 40rpx;
				overflow: hidden;
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);

				.b_r1 {
					width: 308rpx;
					height: 80rpx;
					background: rgba(255, 143, 82, 1);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.b_r2 {
					width: 308rpx;
					height: 80rpx;
					background: rgba(255, 67, 73, 1);
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}
</style>
